<template>
  <div id="app">
    <k-top></k-top>
    <component :is="mapComponent"></component>
    <router-view/>
  </div>
</template>

<script>
export default {
  name:'',
  data() {
    return{
      mapComponent:'k-amap-draw'
    }
  },
  watch:{
    $route:{
      handler(n,o){
        if(n.name === 'Heatmap'){
          this.mapComponent = 'k-amap-heatmap'
        }else if(n.name === 'POIMaker'){
          this.mapComponent = 'k-amap-lbs'
        }
      },
      deep:true,
      immediate:true
    }
  },
  components:{
    'k-top':()=>import("@/components/Top"),
    'k-amap-draw':()=>import("@/components/AMap.Draw"),
    'k-amap-heatmap':()=>import("@/components/AMap.Heat"),
    'k-amap-lbs':()=>import("@/components/AMap.LBS")
  }
}
</script>

<style>

</style>
